<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Users</title>
  <!-- 新 Bootstrap4 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="modifyUser" class="container w-50 mt-0 mx-auto">
  <form name="modifyUser">
    <div class="form-group">
      <label for="id">ID:</label>
      <input type="text" class="form-control" name="id" id="id" th:value="${user.getId()}" disabled>
    </div>
    <div class="form-group">
      <label for="name">name:</label>
      <input type="text" class="form-control" name="name" id="name" th:value="${user.getName()}">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="text" class="form-control" name="pwd" id="pwd" th:value="${user.getPassword()}">
    </div>
    <div class="form-group">
      <label for="name">role:</label>
      <select class="form-control" name="role" id="role" th:value="${user.getRole()}">
        <option th:selected="${user.getRole()=='admin'}" value="admin">admin</option>
        <option th:selected="${user.getRole()=='user'}" value="user">user</option>
      </select>
    </div>
    <div class="form-group">
      <table >
        <tr>
          <th class="col-6">证书</th>
          <th class="col-6">操作</th>
        </tr>
        <tr th:each="userImg : ${userImgsList}">
          <td >
            <img class="w-1 h-1" th:src="@{/{img}(img=${userImg.img})}"/>
          </td>
          <td >
            <input type="button" id="btnDel" value="删除图片" th:onclick="'javascript:delUserImg(\''+${userImg.id}+'\');'" />
          </td>
        </tr>
      </table>
    </div>
  </form>
  <div class="text-center">
    <button id="modify">ModifyUser</button>
  </div>
</div>
<script>
  function delUserImg(id) {
    $.ajax({
      url: "/delUserImg",//请求url
      data: {id:id}, //请求参数
      async: true, //是否异步
      success: function f (result) {
        window.confirm(result.msg); //修改用户信息成功提示框
        var userid = $("#id").val();
        location.href = "/user/"+userid; //重新加载界面，同步数据库信息
      }
    });
  }
  //字符串判空方法
  function isBlank(str){
    if (str == "" || str == null || str == undefined){
      return true;
    }else {
      return false;
    }
  }
  //添加用户js响应事件
  $("#modify").click(function (){
    var id = $("#id").val();
    var name = $("#name").val();
    var password = $("#pwd").val();
    var role = $("#role").val();
    //判断是否有未填项
    if (isBlank(name) || isBlank(password) || isBlank(role)){
      window.confirm("请完善信息");
    }else {
      var param = {
        "id": id,
        "name": name,
        "password": password,
        "role": role
      };
      $.ajax({
        url:"/modifyUser",//请求url
        data: param,  //请求参数
        async: true,  //是否异步
        success: function (result) {
          window.confirm(result.msg); //修改用户信息成功提示框
          location.href = "../users"; //重新加载界面，同步数据库信息
        }
      });
    }
  });
</script>
</body>
</html>